﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <style>
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>
<body>
    <table class="layui-hide" id="ID-treeTable-demo"></table>
    <div id="demo-laypage-all"></div>
    <script type="text/html" id="TPL-treeTable-demo">
        <form class="layui-form" action="" onsubmit="return false">
          <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
              <input type="text" name="itemTypeName" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
              <select name="enableFlag" lay-search>
                <option value=""></option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </div>
            <button type="button" class="layui-btn layui-bg-orange" lay-submit lay-filter="formDemo">查询</button>
            <button type="button" class="layui-btn layui-bg-blue" lay-on="test-page-custom">添加</button>
          </div>
        </form>
    </script>
    <script type="text/html" id="TPL-treeTable-demo-tools">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteData">删除</a>
          <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateData">修改</a>
        </div>
    </script>
    @*添加*@
    <script>
        layui.use(function () {
            var $ = layui.$;
            var layer = layui.layer;
            var treeTable = layui.treeTable;
            var util = layui.util;
            var form = layui.form;
            // 事件
            util.on('lay-on', {
                'test-page-custom': function () {
                    layer.open({
                        type: 2,
                        area: ['500px', '400px'],
                        resize: false,
                        shadeClose: true,
                        title: '添加产品物料分类',
                        content: "https://localhost:44394/WangWeiHao/AddProductClassification",
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var data = layer.getChildFrame('body', index).find('form').serialize();
                            $.ajax({
                                url: "/api/ProductClassification/AddProductClassification",
                                type: "get",
                                async: true,
                                data: data,
                                contentType: "application/json;charset=UTF-8",
                                success: res => {
                                    if (res != null) {
                                        alert("添加成功")
                                        //关闭弹出层
                                        layer.closeAll();
                                        //刷新表格
                                        layer.msg(data.msg, { icon: 1, time: 100 }, function () {
                                            setTimeout('window.location.reload()', 100);
                                        });
                                    }
                                    else {
                                        console.log(res.code)
                                        alert("添加失败")
                                    }
                                }
                            })
                            return false; // 阻止默认 form 跳转
                        }
                    });
                },
            });
        });
    </script>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    @*显示+分页+删除+修改*@
    <script>
        layui.use(['treeTable', 'form'],function () {
            var treeTable = layui.treeTable;
            var layer = layui.layer;
            var dropdown = layui.dropdown;
            var form = layui.form;
            // 渲染
            var inst = treeTable.render({
                elem: '#ID-treeTable-demo',
                url: '/api/ProductClassification/GetProcessPriorityClassOutputs', // 此处为静态模拟数据，实际使用时需换成真实接口
                maxHeight: '801px',
                toolbar: '#TPL-treeTable-demo',
                cols: [[
                    { field: 'itemTypeName', title: '产品名称', width: 180, sort: true },
                    { field: 'orderNum', title: '排序', width: 80, sort: true },
                    { field: 'itemOrProductId', title: '物料/产品', width: 180 },
                    { field: 'enableFlag', title: '是否启用', width: 180, sort: true },
                    { field: 'createTime', title: '创建时间', width: 300, sort: true, templet: function (d) { return layui.util.toDateString(d.createTime, 'yyyy-MM-dd'); } },
                    { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
                ]],
                page: {
                    limit: 5,
                    limits: [5, 10, 15, 20, 25],
                    prev: '上一页',
                    next: '下一页',
                    first: '首页',
                    last: '尾页'
                },
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                parseData: function (res) {
                    console.log(res)
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.data.totalCount, //解析数据长度
                        "data": res.data.pageList//解析数据列表

                    };
                },
            });
            // 搜索提交
            form.on('submit(formDemo)', function (data) {
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                treeTable.reload('ID-treeTable-demo', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                layer.msg('搜索成功');
                return false; // 阻止默认 form 跳转
            });
            // 单元格工具事件
            treeTable.on('tool(' + inst.config.id + ')', function (obj) {
                var layEvent = obj.event; // 获得 lay-event 对应的值
                var trData = obj.data;
                var tableId = obj.config.id;
                if (layEvent === "deleteData") {
                    console.log(trData.id);
                    layer.confirm("确定删除吗？", function (index) {
                        $.ajax({
                            url: "/api/ProductClassification/DeleteProductClassification",
                            type: "get",
                            async: true,
                            data: { id: trData.id },
                            success: res => {
                                if (res > 0) {
                                    layer.msg('删除成功');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        obj.del(); // 删除当前行
                        layer.close(index); // 关闭弹出层
                    });
                }
                else if (layEvent === "updateData") {
                    layer.open({
                        type: 2,
                        area: ['500px', '400px'],
                        resize: false,
                        shadeClose: true,
                        title: '修改产品物料分类',
                        content: "https://localhost:44394/WangWeiHao/UpdateProductClassification?id=" + trData.id,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var data = layer.getChildFrame('body', index).find('form').serialize();
                            $.ajax({
                                url: "/api/ProductClassification/UpdateProductClassification",
                                type: "get",
                                async: true,
                                data: data,
                                contentType: "application/json;charset=UTF-8",
                                success: res => {
                                    if (res != null) {
                                        alert("修改成功")
                                        //关闭弹出层
                                        layer.closeAll();
                                        //刷新表格
                                        layer.msg(data.msg, { icon: 1, time: 100 }, function () {
                                            setTimeout('window.location.reload()', 100);
                                        });
                                    }
                                    else {
                                        console.log(res.code)
                                        alert("修改失败")
                                    }
                                }
                            })
                            return false; // 阻止默认 form 跳转
                        }
                    });
                }
            });
        });
    </script>

    @*查询*@
    <script>
        
    </script>
</body>
</html>
